<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <!--    react.js的核心文件, 支持react语法-->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <!--    react-dom.js 支持react有关的DOM操作-->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <!--    jsx-->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
<script type="text/babel">
    let app=document.getElementById('app');
/*
组件:就是将整个UI拆开成可以复用的代码片段,并且每个片段进行独立构思!
react中的组件,从概念上来讲更像是js中的函数. 其接受任意的参数(即"prop"),并返回用于描述UI界面的react元素,
* */
    /*react中创建组件的两种方式
    1,函数是组件(写法简单,但是不通用,没办法写声明周期,想要更完整需要使用react-hook语法)
    2,class式组件
    *
    *
    * */
//    1,函数式组件
    function Welcome(props){
        return <h1>Welcome,{props.name}</h1>
    };
    function Hello(props){
      return <h1>你好:{props.name}{props.age}  {props.arr.map((v,i)=>{
return <span key={i}>{v} <br/></span>
      })}</h1>
    };
    // ReactDOM.render(
    //     <div>
    //         {Welcome("China")}
    //         {hello({name:"lili"})}
    //     </div>,
    //     app
    // )
    ReactDOM.render(<div>
        <Welcome name="北京"/>
        <Hello name="李明" age="20" arr={[12,33,44,44,49]}></Hello>
        </div>,
    app)
</script>